<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #all {
            width: 100%;

        }

        #all>div {
            width: 200px;
            height: 350px;
            border: 1px solid black;
            margin-top: 20px;
            margin-left: 20px;
            float: left;
        }

        i {
            display: block;
            width: 200px;
            height: 150px;
        }

        i>img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        h2 {
            font-size: 20px;
            line-height: 20px;
        }

        p {
            font-size: 15px;
            line-height: 15px;
        }

        em {
            text-decoration: line-through;
        }

        span {
            color: red;
        }
    </style>
</head>

<body>
    <h1>根据数据生成一个商品列表</h1>
    <button id="btn-jg">根据价格排序</button>
    <button id="btn-xl">根据销量排序</button>
    <button id="btn-pj">根据评价排序</button>

    <div id="all">
        <!-- <div>
        <i><img src="img/ip7.jpg" alt=""></i>
        <h2>iphone7 plugs001</h2>
        <p>颜色：黑色</p>
        <p>原价：<em>3892.00</em></p>
        <p>现价：<span> ￥998.00</span></p>
        <p>销量：8998</p>
        <p>评价：88</p>
    </div> -->
    </div>

    <script>
        var data = [{
            id: '001',
            name: 'iphone7 plugs',
            imgurl: 'img/ip7.jpg',
            price: 5899.00,
            sale: 5888.00,
            color: '土豪金',
            evaluate: 288,
            sales: 1230
        }, {
            id: '002',
            name: 'Note7',
            imgurl: 'img/note7.jpg',
            price: 3899.00,
            sale: 998.00,
            color: '黑色',
            evaluate: 289,
            sales: 439
        }, {
            id: '003',
            name: '荣耀7',
            imgurl: 'img/honor7.jpg',
            price: 1999.00,
            sale: 1899.00,
            color: '白色',
            evaluate: 438,
            sales: 908
        }, {
            id: '004',
            name: 'iphone7 plugs',
            imgurl: 'img/ip7.jpg',
            price: 5999.00,
            sale: 5808.00,
            color: '土豪金',
            evaluate: 223,
            sales: 986
        }, {
            id: '005',
            name: 'Note7',
            imgurl: 'img/note7.jpg',
            price: 3892.00,
            sale: 998.00,
            color: '黑色',
            evaluate: 88,
            sales: 8798
        }, {
            id: '006',
            name: '荣耀7',
            imgurl: 'img/honor7.jpg',
            price: 1929.00,
            sale: 1099.00,
            color: '白色',
            evaluate: 2088,
            sales: 453
        }, {
            id: '007',
            name: 'iphone7 plugs',
            imgurl: 'img/ip7.jpg',
            price: 4899.00,
            sale: 2888.00,
            color: '土豪金',
            evaluate: 2880,
            sales: 88
        }, {
            id: '008',
            name: 'Note7',
            imgurl: 'img/note7.jpg',
            price: 5876.00,
            sale: 998.00,
            color: '黑色',
            evaluate: 3288,
            sales: 99
        }, {
            id: '009',
            name: '荣耀7',
            imgurl: 'img/honor7.jpg',
            price: 4999.00,
            sale: 1899.00,
            color: '白色',
            evaluate: 1288,
            sales: 645
        }, {
            id: '010',
            name: 'iphone7 plugs',
            imgurl: 'img/ip7.jpg',
            price: 5888.00,
            sale: 2899.00,
            color: '土豪金',
            evaluate: 2288,
            sales: 34
        }, {
            id: '011',
            name: 'Note7',
            imgurl: 'img/note7.jpg',
            price: 3299.00,
            sale: 978.00,
            color: '黑色',
            evaluate: 28,
            sales: 1213
        }, {
            id: '012',
            name: '荣耀7',
            imgurl: 'img/honor7.jpg',
            price: 1976.00,
            sale: 1899.00,
            color: '白色',
            evaluate: 3243,
            sales: 123
        }];

        var allbox = document.getElementById('all')
        var btn1 = document.getElementById('btn-jg')
        var btn2 = document.getElementById('btn-xl')
        var btn3 = document.getElementById('btn-pj')

        // 循环遍历
        // for (var j = 0; j < data.length; j++) {
        // }

        btn1.onclick = function () {
            allbox.innerHTML = ""
            data.sort(function (a, b) {
                return a.sale - b.sale
            })
            fn()
        }

        btn2.onclick = function () {
            allbox.innerHTML = ""
            data.sort(function (a, b) {
                return b.sales - a.sales
            })
            fn()
        }

        btn3.onclick = function () {
            allbox.innerHTML = ""
            data.sort(function (a, b) {
                return b.evaluate - a.evaluate
            })
            fn()
        }


        //循环渲染结构
        function fn() {
            for (var i = 0; i < data.length; i++) {
                allbox.innerHTML += "<div><i>" + "<img src=" + data[i].imgurl +
                    "></i><h2>" + data[i].name +
                    "</h2><p>颜色：" + data[i].color + "</p><p>原价：<em>" + data[i].price + "</em></p><p>现价：<span> ￥" + data[
                        i].sale + "</span></p><p>销量：" + data[i].sales + "</p><p>评价：" + data[i].evaluate + "</p></div>"
            }
        }
        fn()
    </script>
</body>

</html>